<template>
    <ak-page-code>components</ak-page-code>
    <ak-title>AKjs前端框架</ak-title>
    <ak-main>
        <div class="module mt_2 ml_1">
            <section class="fl ml_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">使用方法</h3>
                </fieldset>
                <article class="pos_rel ovh h_35_rem bg_white">
                    <div class="plug_tabs_code wm_96">
                        <nav class="ovh press bg_white">
                            <ul class="ovh list_h_3rem nav_line_c length3">
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd pointer touchstart">HTML</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd pointer touchstart">插件调用</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd pointer touchstart">按需引入</li>
                            </ul>
                        </nav>
                        <article class="pos_rel ovh mt_2">
                            <div class="pos_rel ovh bg_white h_24_rem">
                                <section class="pos_rel ovh h_in">
                                    <!--HTML-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
     <div class="module press">
    <ul class="plug_dropbutton">
      <li class="bg_white ovh bor_bottom bor_gray_ddd">
        <dl class="pos_rel pl_3 ovh touchstart list_h_36rem">
          <dt class="fl ovh">
            点击展开查看更多的内容1
          </dt>
          <dd class="pos_abs wm_94 left_0 c_gray_999 text_al_r">
            <i class="fs_14rem icon-ln_jiantouxia"></i>
          </dd>
        </dl>
        <article class="ma_3 c_gray_777 line_h_18rem">
          欢迎使用AKjs移动端前端UI框架。<br>
          当前内容是点击查看更多后的详情信息。
        </article>
      </li>
      <li class="bg_white ovh bor_bottom bor_gray_ddd">
        <dl class="pos_rel pl_3 ovh touchstart list_h_36rem">
          <dt class="fl ovh">
            点击展开查看更多的内容2
          </dt>
          <dd class="pos_abs wm_94 left_0 c_gray_999 text_al_r">
            <i class="fs_14rem icon-ln_jiantouxia"></i>
          </dd>
        </dl>
        <article class="ma_3 c_gray_777 line_h_18rem">
          欢迎使用AKjs移动端前端UI框架。<br>
          当前内容是点击查看更多后的详情信息。
        </article>
      </li>
      <li class="bg_white ovh bor_bottom bor_gray_ddd">
        <dl class="pos_rel pl_3 ovh touchstart list_h_36rem">
          <dt class="fl ovh">
            点击展开查看更多的内容3
          </dt>
          <dd class="pos_abs wm_94 left_0 c_gray_999 text_al_r">
            <i class="fs_14rem icon-ln_jiantouxia"></i>
          </dd>
        </dl>
        <article class="ma_3 c_gray_777 line_h_18rem">
          欢迎使用AKjs移动端前端UI框架。<br>
          当前内容是点击查看更多后的详情信息。
        </article>
      </li>
    </ul>
  </div>
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--插件调用-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
      $(function () {
        $(".plug_dropbutton").AKjs_DropUpDown({
            curDisplay: 2, //当前显示哪个(不展开设置为0)
            active_toggle: "bor_bottom_dashed bor_gray_ddd", //展开后的线条切换（实线切换虚线）
            up_ico: "icon-ln_jiantoushang", //展开后的图标（上箭头）
            down_ico: "icon-ln_jiantouxia", //展开前的图标（下箭头）
            callback:function(ele){ //回调获取展开后的元素
                console.log(ele);
            }
        });
    });
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--按需引入-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
   AKjs_Plugin("AKjs_DropUpDown"); //列表展开和收起功能
</textarea>
                                </section>
                            </div>
                        </article>
                    </div>
                    <fieldset class="wm_96 mt_2 mb_2">
                        <button type="button" class="plug_submit btn_h_au w_100 bg_theme c_white h_32rem">运行测试</button>
                    </fieldset>
                </article>
            </section>
            <section class="fr mr_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">效果展示</h3>
                </fieldset>
                <article class="pos_rel ova h_35_rem bg_white05">
                    <div class="plug_preview pos_rel ovh pa_2"></div>
                </article>
            </section>
        </div>
    </ak-main>

    <ak-plugin></ak-plugin>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->
